@use "./common/function.scss" as *;
@use "./common/componentVar.scss" as *;

.z-button {
  @include set-component-var("button", buttonVar());
  /* 基础样式 */
  background-color: var(#{getVarName("button", "bg-color")});
  color: var(#{getVarName("button", "text-color")});
  height: 32px;
  min-width: 80px;
  padding: 0 16px;
  font-size: 16px;
  box-sizing: border-box; // 忽略padding和border
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  // 把border拆解出来是因为后面会有虚线边框按钮
  border-width: 2px;
  border-color: var(#{getVarName("button", "border-color")});
  border-style: solid;
  cursor: pointer;
  word-break: keep-all;
  user-select: none;
  outline: none;
  transition: all 0.3s;
  span {
    line-height: 1;
  }
  column-gap: 4px; // CSS3新特性：使元素之间产生间隙
  /* 默认样式 */
  &.z-button_icon {
    font-size: 1em; // 继承父元素font-size大小
  }
  &.is-round {
    border-radius: 36px; // 只要大于等于尺寸高度就会变成圆角
  }
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: var(#{getVarName("button", "hover-border-color")});
  }
  &.is-text {
    background-color: transparent;
    border-color: transparent;
    &:hover {
      color: #484848;
      background-color: #f4f4f4;
      border-color: #727272;
    }
  }
  &.is-disabled {
    background-color: #cecece;
    // border-color: #ecb68e;
    cursor: not-allowed;
  }
  &.is-link {
    height: auto;
    min-width: auto;
    padding: 0;
    border: none;
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 2px;
    &:hover,
    &.is-disabled {
      color: #cecece;
    }
  }
  &.is-block {
    width: 100%;
    display: flex;
  }
  &.is-border {
    &,
    &:hover {
      color: #484848;
      background-color: transparent;
    }
  }
  &.is-bashed {
    border-style: dashed;
    &,
    &:hover {
      color: #cecece;
      background-color: transparent;
    }
  }
  &.z-button--size_small {
    height: 24px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 6px;
    &.is-circle {
      width: 24px;
      min-width: 24px;
    }
  }
  &.z-button--size_large {
    height: 40px;
    font-size: 22px;
    &.is-circle {
      width: 40px;
      min-width: 40px;
    }
  }
  &.is-circle {
    padding: 0;
    width: 36px;
    min-width: 36px;
    border-radius: 36px;
    span {
      display: none;
    }
  }
}
// 把之前的样式覆盖掉
/* primary */
.z-button--primary {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #eed675;
    &:hover {
      background-color: #f9f3df;
      border-color: #eed675;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #f0e7bf;
      border-color: #eed675;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #eed675;
    &:hover,
    &.is-disabled {
      color: #f0e7bf;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #eed675;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #eed675;
    }
  }
}
/* secondary */
.z-button--secondary {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #d0daa2;
    &:hover {
      background-color: #f4f8e5;
      border-color: #d0daa2;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #e4eacc;
      border-color: #d0daa2;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #d0daa2;
    &:hover,
    &.is-disabled {
      color: #e4eacc;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #d0daa2;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #d0daa2;
    }
  }
}
/* success */
.z-button--success {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #a2d3ec;
    &:hover {
      background-color: #ebf8ff;
      border-color: #a2d3ec;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #d0e6f1;
      border-color: #a2d3ec;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #a2d3ec;
    &:hover,
    &.is-disabled {
      color: #d0e6f1;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #a2d3ec;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #a2d3ec;
    }
  }
}
/* warning */
.z-button--warning {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #ecb68e;
    &:hover {
      background-color: #fcefe5;
      border-color: #ecb68e;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #f7dbc6;
      border-color: #ecb68e;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #ecb68e;
    &:hover,
    &.is-disabled {
      color: #f7dbc6;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #ecb68e;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #ecb68e;
    }
  }
}
/* danger */
.z-button--danger {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #e19c9c;
    &:hover {
      background-color: #fee9e9;
      border-color: #ecd7d7;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #f0c3c3;
      border-color: #e19c9c;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #e19c9c;
    &:hover,
    &.is-disabled {
      color: #f0c3c3;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #e19c9c;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #e19c9c;
    }
  }
}
/* error */
.z-button--error {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #84a5bd;
    &:hover {
      background-color: #d1e1eb;
      border-color: #84a5bd;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #b7c6d0;
      border-color: #84a5bd;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #84a5bd;
    &:hover,
    &.is-disabled {
      color: #b7c6d0;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #84a5bd;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #84a5bd;
    }
  }
}
/* info */
.z-button--info {
  background-color: var(#{getVarName("button", "bg-color")});
  border-color: var(#{getVarName("button", "border-color")});
  color: var(#{getVarName("button", "text-color")});
  &:hover {
    background-color: var(#{getVarName("button", "hover-bg-color")});
    border-color: var(#{getVarName("button", "hover-border-color")});
    color: #fff;
  }
  &.is-text {
    color: #beb1e7;
    &:hover {
      background-color: #ede8ff;
      border-color: #beb1e7;
    }
  }
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      background-color: #d9d1f2;
      border-color: #beb1e7;
      cursor: not-allowed;
    }
  }
  &.is-link {
    color: #beb1e7;
    &:hover,
    &.is-disabled {
      color: #d9d1f2;
      background-color: transparent;
    }
  }
  &.is-border {
    &,
    &:hover {
      color: #d9d1f2;
    }
  }
  &.is-bashed {
    &,
    &:hover {
      color: #d9d1f2;
    }
  }
}

@each $type in $types {
  $classname: ".z-button--" + $type;
  #{$classname} {
    @include set-component-var("button", buttonVar($type), "type");
  }
}
